<template>
  <div id="app" class="full-height">
    <el-container class="full-height">
      <!-- 主要内容区域 -->
      <el-main class="app-main">
        <router-view />
      </el-main>
    </el-container>
    
    <!-- 文件导入隐藏input -->
    <input
      ref="fileInput"
      type="file"
      accept=".json"
      style="display: none"
      @change="handleFileImport"
    >
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { downloadFile, readFileContent } from '@/utils/helpers'

export default {
  name: 'App',
  
  async created() {
    // 初始化加载文章数据
    await this.loadArticles()
  },
  
  methods: {
    ...mapActions('articles', ['loadArticles']),
    
    // 导出数据
    async exportData() {
      try {
        this.$message({
          message: '正在导出数据...',
          type: 'info'
        })
        
        const articles = this.$store.state.articles.articles
        
        const exportData = {
          articles,
          exportTime: new Date().toISOString(),
          version: '1.0'
        }
        
        const filename = `成章数据备份_${new Date().toISOString().split('T')[0]}.json`
        downloadFile(JSON.stringify(exportData, null, 2), filename, 'application/json')
        
        this.$message({
          message: '数据导出成功',
          type: 'success'
        })
      } catch (error) {
        console.error('导出数据失败:', error)
        this.$message({
          message: '导出数据失败',
          type: 'error'
        })
      }
    },
    
    // 导入数据
    importData() {
      this.$refs.fileInput.click()
    },
    
    // 处理文件导入
    async handleFileImport(event) {
      const file = event.target.files[0]
      if (!file) return
      
      try {
        this.$message({
          message: '正在导入数据...',
          type: 'info'
        })
        
        const content = await readFileContent(file)
        const data = JSON.parse(content)
        
        // 验证数据格式
        if (!data.articles || !Array.isArray(data.articles)) {
          throw new Error('无效的数据格式')
        }
        
        // 确认导入
        const result = await this.$confirm(
          `确定要导入 ${data.articles.length} 篇文章吗？这将覆盖现有数据。`,
          '确认导入',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        if (result === 'confirm') {
          // 导入文章
          this.$store.commit('articles/SET_ARTICLES', data.articles)
          
          this.$message({
            message: '数据导入成功',
            type: 'success'
          })
        }
      } catch (error) {
        console.error('导入数据失败:', error)
        this.$message({
          message: '导入数据失败：' + error.message,
          type: 'error'
        })
      } finally {
        // 清空文件输入
        event.target.value = ''
      }
    },
    
    // 清空数据
    async clearData() {
      try {
        const result = await this.$confirm(
          '确定要清空所有数据吗？此操作不可恢复。',
          '确认清空',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        if (result === 'confirm') {
          // 清空文章数据
          this.$store.commit('articles/SET_ARTICLES', [])
          
          // 重置编辑器
          this.$store.dispatch('editor/resetEditor')
          
          this.$message({
            message: '数据清空成功',
            type: 'success'
          })
        }
      } catch (error) {
        // 用户取消操作
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-header {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0;
  height: 60px;
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24px;
  }
  
  .logo-section {
    display: flex;
    align-items: center;
    
    .logo-icon {
      font-size: 24px;
      color: #409eff;
      margin-right: 8px;
    }
    
    .logo-text {
      font-size: 20px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .nav-section {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    .nav-menu {
      border-bottom: none;
      background: transparent;
      
      .el-menu-item {
        height: 58px;
        line-height: 58px;
        border-bottom: 2px solid transparent;
        
        i {
          margin-right: 4px;
        }
        
        &.is-active {
          border-bottom-color: #409eff;
          background: transparent;
        }
      }
    }
  }
  
  .user-section {
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 6px;
      transition: background-color 0.3s;
      
      &:hover {
        background-color: #f5f5f5;
      }
      
      i {
        margin: 0 4px;
      }
    }
  }
}

.app-main {
  padding: 0;
  background: #f5f5f5;
  overflow: auto;
}

// 响应式设计
@media (max-width: 768px) {
  .app-header {
    .header-content {
      padding: 0 16px;
    }
    
    .nav-section {
      .nav-menu {
        .el-menu-item {
          span {
            display: none;
          }
        }
      }
    }
    
    .user-section {
      .user-info {
        span {
          display: none;
        }
      }
    }
  }
}
</style>
